/**
 * 设备
 */
import React from 'react';
import { connect } from 'dva';
import shouldComponentUpdate from '../../components/decorator/shouldComponentUpdate';
import Table from './table';
import Filter from './filter';
import AddModal from './addModal';
import showInHeader from '../../components/decorator/showInHeader';
import { isReleaseVersion } from '../../components/permissionControl';
import { api } from '../../services/serviceMode';

@showInHeader(['productSelect'])
@shouldComponentUpdate
class Device extends React.Component {
	constructor(props, context) {
		super(props, context);
		this.state = {
			queryData: {},
			isShowAdd: false
		};
	}

	componentDidUpdate(prevProps, prevState) {
		// if (prevState.queryData !== this.state.queryData || prevProps.productId !== this.props.productId) {
		// 	this.query();
		// }
		if (this.props.device.isShowAdd === true) {
			this.setState({ isShowAdd: this.props.device.isShowAdd });
		}
		if (prevState.isShowAdd !== this.props.device.isShowAdd && this.props.device.isShowAdd === false) {
			// this.query();
			this.setState({ isShowAdd: this.props.device.isShowAdd });
		}
	}

	// query() {
	// 	// 请求数据
	// 	const { dispatch, productId } = this.props;
	// 	const { queryData } = this.state;

	// 	dispatch({
	// 		type: 'device/query',
	// 		payload: { ...queryData, query: { ...queryData.query, productId } }
	// 	});
	// }

	// pageChange = page => {
	// 	const { queryData } = this.state;
	// 	this.setState({
	// 		queryData: { ...queryData, page }
	// 	});
	// }

	queryChange = queryData => {
		this.setState({ queryData });
	}

	cancelAddModal = () => {
		this.setState({ isShowAdd: false });
		this.props.dispatch({
			type: 'device/set',
			payload: {
				isShowAdd: false
			}
		});
	}

	select = selectedRowKeys => {
		this.props.dispatch({
			type: 'device/set',
			payload: {
				selectedRowKeys
			}
		});
	}

	render() {
		const { queryData } = this.state;
		const { device, productId, user } = this.props;
		const { selectedRowKeys } = device;

		const isRelease = isReleaseVersion(user.permissions, api.query);

		return (
			<div className="content-inner">
				<Filter
					keys={selectedRowKeys}
					query={this.queryChange}
					exportTitle={'deviceExport'}
				/>
				<Table
					select={this.select}
					selectedRowKeys={selectedRowKeys}
					query={{ ...queryData, productId }}
					exportTitle={'deviceExport'}
				/>
				{
					// isRelease &&
					<AddModal
						isShowAdd={this.state.isShowAdd}
						handleCancel={this.cancelAddModal}
					/>
				}
			</div>
		);
	}
}

export default connect(
	({ device, app, loading }) => ({ device, productId: app.productId, loading, user: app.user })
)(Device);
